<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <panel :title="breadcrumbs.title">
            <data-table class="table-bordered table-hover" :tableHead="th" :tableData="tr" :insert="insert" :info="info"
                        :trash="trash" id="table-s"></data-table>
        </panel>
        <document-title :title="breadcrumbs.title"></document-title>
    </admin-main>
</template>

<script>
    /* eslint-disable no-undef */
    import AdminMain from './AdminMain.vue';
    import Panel from 'vue-fiu-ui/src/main/js/components/panel/Panel.vue';
    import DataTable from 'vue-fiu-ui/src/main/js/components/table/DataTable.vue';
    import DocumentTitle from '../layout/Title.vue';

    export default {
        data () {
            return {
                breadcrumbs: {
                    title: '授权管理',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: '#', cut: false, disabled: true, text: '授权管理'}
                    ]
                },
                th: [
                    {text: 'id'},
                    {text: 'name'},
                    {text: 'secret'},
                    {text: 'redirect'},
                    {text: 'personal access client'},
                    {text: 'password client'},
                    {text: 'revoked'},
                    {text: 'updated at'}
                ],
                tr: []
            };
        },
        components: {
            DocumentTitle,
            DataTable,
            Panel,
            AdminMain
        },
        methods: {
            initTr () {
                axios.get('/passport/list').then((res) => {
                    let data = res.data;
                    let result = data.data;
                    if (data.success === false) {
                        this.$notify.open({
                            type: 'danger',
                            fixed: 'top-right',
                            content: JSON.stringify(result)
                        });
                        return 0;
                    }
                    let list = [];
                    for (let key in result) {
                        list.push({
                            id: result[key].id,
                            data: [
                                result[key].id,
                                result[key].name,
                                '***************',
                                result[key].redirect,
                                `<input data-id="${result[key].id}" data-key="personal_access_client" class="ck" type="checkbox" ${result[key].personal_access_client ? 'checked' : ''}/>`,
                                `<input data-id="${result[key].id}" data-key="password_client" class="ck" type="checkbox" ${result[key].password_client ? 'checked' : ''}/>`,
                                `<input data-id="${result[key].id}" data-key="revoked" class="ck" type="checkbox" ${result[key].revoked ? 'checked' : ''}/>`,
                                result[key].updated_at
                            ]
                        });
                    }
                    this.tr = list;
                });
            },
            edit (id) {

            },
            insert () {
                this.$modal.open({
                    title: 'Add Client',
                    content: '<div><div class="form-group"><label>name:</label><input type="text" class="form-control" id="name"></div><div class="form-group"><label>redirect:</label><input type="text" class="form-control" id="redirect"></div></div>'
                }, (el, m) => {
                    el = el.parent().parent();
                    let inputs = $('input', el);
                    let name = inputs[0].value;
                    let redirect = inputs[1].value;
                    axios.post('/passport/create', {name: name, redirect: redirect}).then((res) => {
                        if (res.data.success === false) {
                            this.$notify.open({content: '添加失败'});
                        } else {
                            this.initTr();
                        }
                    });
                    m.modal('hide');
                });
            },
            info (id) {
                axios.get('/passport/info/' + id).then((res) => {
                    if (res.data.success === false) {
                        this.$notify.open({
                            type: 'danger',
                            content: JSON.stringify(res.data.data)
                        });
                    } else {
                        let pass = res.data.data;
                        this.$modal.open({
                            title: pass.name,
                            content: `<div><div class="form-group"><label>Master:</label><input value="${pass.user ? pass.user.name : 'System'}" class="form-control" readonly></div><div class="form-group"><label>Secret Show:</label><input value="${pass.secret}" class="form-control" readonly></div></div>`
                        });
                    }
                });
            },
            trash (id) {
                axios.post('/passport/delete', {id: id}).then((res) => {
                    if (res.data.success === false) {
                        this.$notify.open({content: '删除失败'});
                    } else {
                        this.initTr();
                    }
                });
            },
            update (id, key, value) {
                axios.post('/passport/update', {id: id, key: key, value: value}).then((res) => {
                });
            }
        },
        mounted () {
            this.initTr();
            $('#table-s').click((e) => {
                let target = e.target;
                if (target.nodeName !== 'INPUT') {
                    return 0;
                }
                let input = $(target);
                if (!input.hasClass('ck')) {
                    return 0;
                }
                this.update(input.attr('data-id'), input.attr('data-key'), input.prop('checked'));
            });
        }
    };
</script>
